<html>
<head>
<title>Google Maps - SOS demo</title> 

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAO4IjyUfxvRPI0ZXJ51eyLhSMBgh0E2AhUC1j9d-Vk1Y6agFfexRkkXDvoW67tuc7bJUFRkCgUVkMAA"></script>
<script src="sos.js"></script>
<script src="markermanager.js"></script>
<script type="text/javascript">
  google.load("maps", "2");
  var map = null;
  var mgr = null;
  function initialize() {
    map = new google.maps.Map2(document.getElementById("map"));
    map.setCenter(new google.maps.LatLng(54, -2), 5);
    map.setUIToDefault();
    var mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: true };

    mgr = new MarkerManager(map, mgrOptions);
  }
  google.setOnLoadCallback(initialize);


  function sosCallback(observations) {
    var batch = [];
    for(var i = 0; i < 20; i++) {
        var o = observations.getObservation(i); 
        var point = new google.maps.LatLng(o.getLocation().getY(), o.getLocation().getX());
        batch.push(new google.maps.Marker(point));
    }

    mgr.addMarkers(batch, 7);
    mgr.refresh();

    var image = document.getElementById('loading');
    image.style.display = 'none';
    var link = document.getElementById('link');
    link.disabled = false;
  }
   
  function loadObservations() {
     var link = document.getElementById('link');
     link.disabled = true;
     var image = document.getElementById('loading');
     image.style.display = "inline";
     var sos = new SOS("http://intamap.aston.ac.uk:8080/WeatherSOS/sos");
     sos.getObservations(sosCallback, 'WeatherUnderground','urn:x-ogc:def:phenomenon:OGC:Temperature');
  }
</script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1', {'packages':['piechart']});
      
      // Set a callback to run when the API is loaded.
      google.setOnLoadCallback(drawChart);
      
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(5);
        data.setValue(0, 0, 'Work');
        data.setValue(0, 1, 11);
        data.setValue(1, 0, 'Eat');
        data.setValue(1, 1, 2);
        data.setValue(2, 0, 'Commute');
        data.setValue(2, 1, 2);
        data.setValue(3, 0, 'Watch TV');
        data.setValue(3, 1, 2);
        data.setValue(4, 0, 'Sleep');
        data.setValue(4, 1, 7);

        var chart = new google.visualization.PieChart(document.getElementById('graph'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>

</head>
<body>
<div id="map" style="height:600px; width:600px; float:left;"></div>
<div id="graph" style="height:400px; width: 400px; float: left; clear:right;"></div>
<p style="clear:left; margin-top:10px; padding-top:10px;">
<a id="link" href="javascript:loadObservations();" style="color:#333;">Load Observations</a>
<img src="ajax-loader.gif" style="display:none" id="loading"/>
</p>
</body>
</html>
